<template>
	<view class="container">


		<!-- 内容区域包装器 -->
		<view class="content-wrapper">
			<!-- 搜索区域 -->
			<view class="search-box">
				<u-search placeholder="请输入关键搜索"  v-model="fromData.keyword" :show-action="false" :clearabled="true" :animation="false"
					shape="round" bgColor="#FFFFFF" height="72rpx" searchIconColor="#999999" placeholderColor="#999999" @change="changekeword"
					:inputStyle="{
						color: '#333333',
						backgroundColor: '#FFFFFF',
					}"></u-search>
			</view>

			<!-- 筛选区域 -->
			<view class="filter-tabs">
				<view class="cordbox">
					<view class="cordbox_Z" @click="showSex = true">
						选择楼栋
						<u-icon name="arrow-down-fill" color="#000" size="18/*" v-if="showSex == false"></u-icon>
						<u-icon name="arrow-up-fill" color="#000" size="18/*" v-else></u-icon>

					</view>
					<view class="cordbox_y" @click="datashow = true" v-if="yuetext=='请选择月份'">
							{{ yuetext }}
							<u-icon name="arrow-down-fill" color="#000" size="18/*" v-if="datashow == false"></u-icon>
							<u-icon name="arrow-up-fill" color="#000" size="18/*" v-else></u-icon>
							
					</view>
					<view class="cordbox_y"  v-else>
							<text @click="datashow = true">{{ yuetext }}</text>
							<u-icon name="close" color="#000" size="18/*" @click.stop="deletedata"></u-icon>
					</view>
				</view>
				<!-- 	<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in filterTabs" :key="index"
						@click="handleTabClick(index)">
						<text :class="['tab-text', currentTab === index ? 'active' : '']">{{ item.name }}</text>
						<u-icon :name="currentTab === index ? 'arrow-up' : 'arrow-down'" size="12"
							:color="currentTab === index ? '#FE4F04' : '#666'"></u-icon>
					</view> -->
			</view>
			<!-- 下拉内容 -->
			<view class="dropdown-content" v-if="showDropdown">
				<view class="mask" @click="closeDropdown"></view>
				<view class="content">
					<view class="option-list">
						<view class="option-item" v-for="(option, idx) in filterTabs[currentTab].options" :key="idx"
							@click="selectOption(option)">
							<text
								:class="['option-text', filterTabs[currentTab].value === option.value ? 'active' : '']">
								{{ option.label }}
							</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 收租账单 -->
		<view class="content-box">
			<view class="u-content u-p-10 u-m-40 u-m-r-20">
				<view class="contentext">
					本月收租账单
				</view>
				<view class="u-content-nav">
					<view class="u-flex u-flex-column u-flex-items-center">
						<view class="u-content-nav-title">应收(元)</view>
						<view class="u-content-nav-money">{{ snData.total_money }}</view>
					</view>
					<view class="u-flex u-flex-column u-flex-items-center">
						<view class="u-content-nav-title">待收(元)</view>
						<view class="u-content-nav-money">{{ snData.wei_money }}</view>

					</view>
					<view class="u-flex u-flex-column u-flex-items-center">
						<view class="u-content-nav-title">已收入(元)</view>
						<view class="u-content-nav-money">{{ snData.yi_money }}</view>
					</view>
					<view class="u-flex u-flex-column u-flex-items-center">
						<!-- 	<view class="u-content-nav-money">{{'50%'}}</view>
						<view class="u-content-nav-title">出租率</view> -->
					</view>
				</view>
			</view>
			<!-- tab切换 -->
			<view class="u-m-40 ">
				<u-tabs :list="list1" :current="current" :scrollable="false" @change="change" lineWidth="20"
					lineColor="#f56c6c" :activeStyle="{
						color: '#000',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" lineHeight="7"></u-tabs>
			</view>
			<!-- 列表 -->
			<view class="u-m-40  cord" v-for="item in datalist" @click="jump('/pages-landlord/house/bill?id='+item.id)">
				<view class="datebox">
					2024.09
					<u-icon name="arrow-down-fill" color="#000" size="12" style="margin-left: 8rpx;"></u-icon>
				</view>
				<view class="flex">
					<view class="flextop">
						<span class="flextoptext">{{ item.build_address }}</span><span class="flextoptext">|</span><span
							class="flextoptext">{{ item.room_name }}</span>
						<view class="flextoptextd">
							{{ item.status_text }}
						</view>
					</view>
					<view class="flextoptexty">
						{{ item.status_text }}
					</view>
				</view>
				<u-divider></u-divider>
				<view class="flexz">
					<view class="">
						<span style="color: #c7c7c8;">承租人：</span>{{ item.nickname }}
					</view>
					<view class="flexz-y">
						{{ item.type_text }}<u-icon name="arrow-right" color="#000" size="10"></u-icon>
					</view>
				</view>
				<view class="flexz">
					<view class="">
						<span style="color: #c7c7c8;">创建时间：</span>{{ item.createtime }}
					</view>
					<view class="">
						￥{{ item.money }}
					</view>
				</view>
			</view>
			
			<view style="height: 200rpx;"></view>
			<view class="folebutton">
				一键通知租户
			</view>
		</view>
		<!-- 楼栋弹窗 -->
		<u-action-sheet :show="showSex" :round="30" :actions="actions" @close="showSex = false"
			@select="sexSelect($event, type)">
		</u-action-sheet>
		<!-- 年月选择 -->
		<u-datetime-picker ref="datetimePicker" :show="datashow" v-model="value" mode="year-month"
			:formatter="formatter" @cancel="datashow = false" @close="datashow = false" @confirm="datashowclick"></u-datetime-picker>
	</view>
</template>

<script>

import { billLists, buildinglist } from '@/api/landlord.js'
export default {
	data() {
		return {
			value: '',
			datashow: false,
			showSex: false,
			showDropdown: false,
			currentTab: 0,
			current: 0,
			yuetext:'请选择月份',
			snData: {

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			actions: [
			],
			datalist: [],
			list1: [{
				name: '全部',
			}, {
				name: '待收款',
			}, {
				name: '已收入'
			}, {
				name: '已逾期'
			}, {
				name: '已退款'
			}],
			fromData: {
				page: 1,
				limit: 10,
				building_id: 0,
				time: '',
				status: 0,
				keyword:''
			},
		};
	},
	onLoad(options) {
		this.init()
		console.log(8888);
		this.building()
	},
	async onReachBottom() {
		this.fromData.page++
		this.init()
		},
	methods: {
		changekeword(){
			this.datalist=[]
			this.fromData.page=1
			this.fromData.time =''
			this.yuetext='请选择月份'
			this.init()
		},
		deletedata(){
			this.datalist=[]
			this.fromData.page=1
			this.fromData.time =''
			this.yuetext='请选择月份'
			this.init()
		},
		datashowclick(e) {
			const timeFormat = uni.$u.timeFormat;
			let timeValue = timeFormat(e.value, 'yyyy-mm');
			// 时间选择回调
			this.yuetext=timeValue
			this.datalist=[]
			this.fromData.page=1
			this.fromData.time =timeValue
			this.init()

			this.datashow = false
		},
		sexSelect(e) {
			this.datalist = []
			this.fromData.page = 1
			this.fromData.building_id = e.id
			this.init()
		},
		building() {
			buildinglist({}).then(res => {
				let list = [
					{
						id: 0,
						name: '全部'
					}
				]
				res.data.data.data.forEach(e => {
					list.push({
						id: e.id,
						name: e.address
					})
				});
				this.actions = list
			})
		},
		//切换
		change(e) {
			console.log(e);
			this.datalist = []
			this.fromData.page = 1
			this.fromData.status = e.index
			this.init()
		},
		init() {
			billLists(this.fromData).then(res => {
				console.log(res.data.data);
				res.data.data.data.forEach((item) => {
					this.datalist.push(item)
				})
				this.snData = res.data.data.total
			})
		},
		// 路由跳转
		jump(item) {
			uni.navigateTo({
				url: item
			});
		},
		handleTabClick(index) {
			if (this.currentTab === index) {
				this.showDropdown = !this.showDropdown;
			} else {
				this.currentTab = index;
				this.showDropdown = true;
			}
		},
		selectOption(option) {
			this.filterTabs[this.currentTab].value = option.value;
			this.showDropdown = false;
			// 处理筛选逻辑
		},
		closeDropdown() {
			this.showDropdown = false;
		},

	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
};
</script>

<style lang="less" scoped>
.cord {
	// width: 100%;
	box-sizing: border-box;
	padding: 15rpx;
	border-radius: 20rpx;
	background-color: #fff;

}

.folebutton {
	width: 90%;
	background-color: #fe4f04;
	position: fixed;
	left: 50%;
	height: 100rpx;
	border-radius: 40rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	margin-left: -45%;
	bottom: 20rpx;
}

.flexz {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 25rpx;
	margin: 20rpx 0;

	.flexz-y {
		display: flex;
		align-items: center;
		color: #fea729;
	}
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 20rpx 0;

	.flextop {
		display: flex;

		.flextoptext {
			font-weight: 600;
			margin-right: 8rpx;
		}

		.flextoptextd {
			display: flex;
			padding: 5rpx;
			border: 1rpx solid #fe9b70;
			background-color: #fff5f0;
			color: #fe9b70;
			font-size: 20rpx;
			margin-left: 10rpx;
		}
	}

	.flextoptexty {
		color: #fe9b70;
		font-size: 25rpx;
	}
}

.datebox {
	display: flex;
	align-items: center;
	height: 36%;
	background: #F5F6FA;
	font-size: 20rpx;
	padding: 5rpx;
	width: 120rpx;
	justify-content: center;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 22rpx;
	color: #606060;
	// border-radius: 20rpx;

}

.contentext {
	box-sizing: border-box;
	padding: 20rpx 0 0 20rpx;
	color: #fe7c44;
	font-weight: 600;
}

.u-content {
	border-radius: 20rpx;
	padding: 40rpx 30rpx 40rpx 30rpx;
	font-size: 24rpx;
	color: #333;
	z-index: 3;
	position: relative;
	background: linear-gradient(180deg, #FFF5F1 0%, rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(53, 110, 253, 0.05);
	border-radius: 32rpx;
	border: 2rpx solid #FFFFFF;
	margin-top: 40rpx;

	.u-content-nav {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		-webkit-border-radius: 20rpx;
		-moz-border-radius: 20rpx;
		border-radius: 20rpx;

		.u-content-nav-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #782400;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			padding-top: 10rpx;
		}

		.u-content-nav-icon {
			width: 120rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.u-content-time {
		text-align: center;
		overflow: hidden;

		.avtar-url {
			/* 其他样式 */
			width: 140rpx;
			padding: 0px 5rpx;
			height: 140rpx;
			background: #faf1ed;
			border-radius: 50%;
			border: 1rpx solid #faf1ed;
			display: flex;
			font-weight: 700;
			justify-content: center;
			align-items: center;
		}

	}

}

.container {
	min-height: 100vh;
	background-color: #f5f6fa;
}

.cordbox {
	display: flex;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;

	.cordbox_Z {
		background-color: #fff;
		width: 48%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20rpx;
	}

	.cordbox_y {
		background-color: #fff;
		width: 48%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 20rpx;
	}
}

.search-box {
	padding: 24rpx 32rpx;

	:deep(.u-search) {
		background-color: #ffffff !important;
		border-radius: 36rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

		.u-search__content {
			background-color: #ffffff !important;
			height: 72rpx;
			padding: 0 30rpx;

			.u-search__content__icon {
				margin-right: 8rpx;
			}

			.u-search__content__input {
				font-size: 28rpx;
			}
		}
	}
}

.filter-tabs {
	position: relative;
	background: #f5f6fa;

	.tab-list {
		display: flex;
		justify-content: space-around;
		padding: 24rpx 0;

		.tab-item {
			display: flex;
			align-items: center;
			position: relative;

			.tab-text {
				font-family: PingFangSC, PingFang SC;
				font-size: 26rpx;
				color: #666666;
				margin-right: 6rpx;

				&.active {
					color: #2979ff;
					font-weight: 500;
				}
			}

			// 添加第一个选项的特殊样式（综合排序）
			&:first-child {
				.tab-text {
					color: #2979ff;
				}
			}
		}
	}

	.dropdown-content {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		z-index: 100;

		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0, 0, 0, 0.4);
			z-index: 98;
		}

		.content {
			position: relative;
			background-color: #fff;
			z-index: 99;
			border-radius: 0 0 16rpx 16rpx;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);

			.option-list {
				padding: 20rpx 0;

				.option-item {
					padding: 20rpx 32rpx;

					.option-text {
						font-size: 26rpx;
						color: #666666;

						&.active {
							color: #2979ff;
							font-weight: 500;
						}
					}
				}
			}
		}
	}
}

.shop-list {
	padding: 24rpx;

	.shop-item {
		display: flex;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;

		.shop-img-wrap {
			position: relative;
			width: 180rpx;
			height: 150rpx;
			margin-right: 24rpx;
			flex-shrink: 0;

			.shop-tag {
				position: absolute;
				left: 0;
				top: 0;
				background: #3b7cff;
				color: #fff;
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 8rpx 0 8rpx 0;
				z-index: 1;
			}

			.shop-img {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.shop-info {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			// flex-direction: column;
			align-items: center;

			justify-content: space-between;
			min-width: 0; // 防止文字溢出

			.shop-title {
				font-size: 28rpx;
				font-weight: 500;
				color: #333;
				line-height: 40rpx;
				margin-bottom: 12rpx;
				// 文字超出显示省略号
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.shop-attrs {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				margin-bottom: 12rpx;

				text {
					position: relative;
					margin-right: 24rpx;

					&:not(:last-child)::after {
						content: "";
						position: absolute;
						right: -12rpx;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 20rpx;
						background: #eeeeee;
					}
				}
			}

			.shop-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx;
				margin-bottom: 12rpx;

				.tag {
					font-size: 20rpx;
					color: #ff5a5f;
					background: rgba(255, 90, 95, 0.1);
					padding: 2rpx 8rpx;
					border-radius: 4rpx;
				}
			}

			.shop-price {
				color: #ff5a5f;
				display: flex;
				align-items: baseline;

				.price {
					font-size: 32rpx;
					font-weight: 600;
				}

				.unit {
					font-size: 22rpx;
					margin-left: 4rpx;
				}
			}
		}
	}
}
</style>